<template>
	<view class="content">
		<view class="topbox">
			<StatusBar></StatusBar>
			<view class="locationBox itemBox2 " :style="[{height:StatusBar.height+'px'}]">
		
				<text class="addr-name clickEffict "> {{title || '--'}}
				</text>
				
			</view>
		</view>
		<view class="search-boxes" :style="[{marginTop:StatusBar.top+StatusBar.height+5+'px'}]">
		
		</view>

		<scroll-view scroll-y="true" :style="{height: swiperHeight+'px'}">
			<view class="tousu-item-title">
				投诉类型
			</view>
			<view class="tousu-item-box">
				<view class="tousu-item-box1" v-for="(item,index) in tousuType"
					:class="type==index?'bg-blue':'bg-white'" @click="changeType(index)">
					{{item.name}}
				</view>
			</view>
			<view class="tousu-item-title" v-if="type!=3 && selectList.length==0">
				选择订单
			</view>
			<view class="order-box " @click="closeComent" v-if="type!=3 && selectList.length==0">
				<view class="select-btn " v-if="order_sn == 0"><text>请选择订单</text> <text
						class="cuIcon-right margin-left"></text></view>
				<view class="order-sn" v-else><text>订单编号：</text><text>{{order_sn}}</text></view>
			</view>
			<view class="order-box margin-top" @click="closeComent" v-if="type!=3 && selectList.length>0">
				<view class='o-order-list' v-if="selectList.length>0">
					<view class='o-order-item ' v-for="(item,index) in selectList">
						<view class="o-item-header">
							<image :src="item.shop.logo" class="shop-logo"></image>
							<view class="shop-info">
								<view>
									<text class="title">{{item.shop.shop_name}}</text>
									<text v-if="item.is_reserve==1 && item.orderType==0" class="self-tag">（预定）</text>
									<text v-if="item.take_self==1" class="self-tag">（自取）</text>
									<text v-if="item.orderType==1" class="self-tag">（快递代取）</text>
									<text class="right-ico">〉</text>
								</view>
								<view><text class="addtime">{{item.created_at}}</text></view>
							</view>
							<view class="status">
								<text v-if="item.order_status == 0 && item.pay_status == 0" class="red-color">待支付</text>
								<text v-if="item.order_status == 0 && item.pay_status == 1"
									class="blue-color">待商家确认</text>
								<text v-else-if="item.order_status == 1 " class="blue-color">商家出餐中</text>
								<text v-else-if="item.order_status == 2 " class="blue-color">取餐中</text>
								<text v-else-if="item.order_status == 3 ">已取消</text>
								<text v-else-if="item.order_status == 4 ">已完成</text>
								<text v-else-if="item.order_status == 5 ">商家拒绝</text>
								<text v-else-if="item.order_status == 6 ">退款处理中</text>
							</view>
						</view>

						<view class="o-item-content" v-for="(goods,gkey) in item.order_goods" :key="gkey">
							<image :src="goods.goods[0].goods_thumbs[0]" mode="aspectFill" class="goodImg"></image>
							<view class="goods-name">
								<view><text>{{goods.goods_name}}</text></view>
								<view class="spec-key"><text>{{goods.spec_item_name}}</text></view>
							</view>
							<view class="goods-price">
								<text>￥{{goods.goods_total_price}}</text>
								<view class="num">共{{goods.goods_num}}件</view>
							</view>
						</view>

					</view>



				</view>
			</view>
			<view class="c-content margin-top">
				<textarea @input="blur" adjust-position="true" placeholder="请详细描述投诉具体内容，平台将对您的信息保密..." />
			</view>
			<robby-image-upload v-model="imageData" @delete="deleteImage" @add="addImage"
				:server-url-delete-image="serverUrlDeleteImage" :server-url="serverUrl" :fileKeyName="file">
			</robby-image-upload>
			<view class="c-btn-box">
				<button class="submit-btn" type="primary" @click="sub">提交投诉</button>
			</view>
			<view class="foot"></view>
		</scroll-view>

		<!--点击订单开始 -->

		<view class="comment-secen-box" v-if="isShowComment">

			<view class="mask" @click="closeComent">

			</view>

			<view class="comment-secend animation-slide-bottom">
				<view class="comment-secend-title">

					<text class="sousuo" @click="search"> 搜索 </text>
					<text class="selectOrder">选择订单</text>
					<view class="comment-secend-fn">
						<text class="cuIcon-close comment-foot-icon clickEffict margin-left"
							@click="closeComent"></text>

					</view>
				</view>

				<scroll-view scroll-y="true">
					<view class="select-order-box">
						<view class='o-order-list' v-if="orderList.length>0">
							<view class='o-order-item ' v-for="(item,index) in orderList" :key="index"
								@click="checkOrder(item)" v-if="orderList.length > 0">
								<view class="o-item-header">
									<image :src="item.shop.logo" class="shop-logo"></image>
									<view class="shop-info">
										<view>
											<text class="title">{{item.shop.shop_name}}</text>
											<text v-if="item.is_reserve==1 && item.orderType==0"
												class="self-tag">（预定）</text>
											<text v-if="item.take_self==1" class="self-tag">（自取）</text>
											<text v-if="item.orderType==1" class="self-tag">（快递代取）</text>
											<text class="right-ico"> 〉</text>
										</view>
										<view><text class="addtime">{{item.created_at}}</text></view>
									</view>
									<view class="status">
										<text v-if="item.order_status == 0 && item.pay_status == 0"
											class="red-color">待支付</text>
										<text v-if="item.order_status == 0 && item.pay_status == 1"
											class="blue-color">待商家确认</text>
										<text v-else-if="item.order_status == 1 " class="blue-color">商家出餐中</text>
										<text v-else-if="item.order_status == 2 " class="blue-color">取餐中</text>
										<text v-else-if="item.order_status == 3 ">已取消</text>
										<text v-else-if="item.order_status == 4 ">已完成</text>
										<text v-else-if="item.order_status == 5 ">商家拒绝</text>
										<text v-else-if="item.order_status == 6 ">退款处理中</text>
									</view>
								</view>

								<view class="o-item-content" v-for="(goods,gkey) in item.order_goods" :key="gkey">
									<image :src="goods.goods[0].goods_thumbs[0]" class="goodImg" mode="aspectFill"></image>
									<view class="goods-name">
										<view><text>{{goods.goods_name}}</text></view>
										<view class="spec-key"><text>{{goods.spec_item_name}}</text></view>
									</view>
									<view class="goods-price price-box">
										<text>￥{{goods.goods_total_price}}</text>
										<view class="num">共{{goods.goods_num}}件</view>
									</view>
								</view>

							</view>

							<view class="foot">

							</view>
							<view class="foot">

							</view>
						</view>
						<view class='o-order-list' v-else>
							<view class="text-gray text-center margin-top" style="width: 100%;">没有更多了</view>
							<view class="foot">
							</view>
						</view>
					</view>
					<view class="foot">

					</view>
				</scroll-view>

			</view>


		</view>

		<uni-popup ref="reply" type="bottom">
			<view class=" inputbox" :style="{bottom:inputTop+'px'}">
				<input @confirm="pipei(searchVal)" :adjust-position="false" @blur="closeApply" v-model="searchVal" placeholder="搜索订单..."
					class="input-box">
				<button class="cu-btn sm bg-blue search-bottom" @click="apply()">搜索</button>

			</view>
		</uni-popup>

	</view>
</template>

<script>
	import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue'
	import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
	export default {
		components: {
			robbyImageUpload,
			uniPopup
		},
		name: "Complanit",
		data() {
			return {
				isShowComment: false,
				swiperHeight: 0,
				title: "投诉",
				tousuType: [{
						name: "餐品问题",
						type: 0,
					},
					{
						name: "配送问题",
						type: 1
					},
					{
						name: "商家服务",
						type: 2
					},
					{
						name: "其他投诉",
						type: 3
					}

				],
				imageData: [],
				serverUrl: this.apiHost + '/comm/imageUp',
				serverUrlDeleteImage: this.apiHost + '/comm/delupload',
				formData: {
					order_id: 0,
					content: '',
					area_id: uni.getStorageSync('area_id'),
					imgs: {}
				},
				orderList: {},
				type: 0,
				order_sn: 0,
				searchVal: '',
				preList: [],
				selectList: [],
				StatusBar: this.Custom,
				inputTop: 0,
				showInput: false,
			}
		},
		onLoad(option) {
			this.formData.order_id = option.id

		},

		watch: {
			searchVal(val) {

				this.pipei(val);
			}

		},
		mounted() {
			uni.onKeyboardHeightChange(res => {
				console.log(res);
				if(res.height>0){
					res.height=res.height-45;
				}
				this.inputTop = res.height;
			});
			this.getInfo().then((e) => {
			
				this.swiperHeight = e.screenHeight - (e.custom.top + e.custom.height);
			
			})
			//this.swiperHeight = this.WH - (this.StatusBar.top + this.StatusBar.height);
		},
		methods: {
			load() {


			},
			apply(){
				uni.showLoading();
				this.pipei(this.searchVal);
			},
			deleteImage: function(e) {
				console.log(e)
			},
			addImage: function(e) {
				console.log(e)
				this.formData.imgs = e.allImages
			},

			/**
			 * @name 获取textarea内容
			 */
			blur(e) {
				this.formData.content = e.detail.value
			},
			//搜索匹配
			pipei(data) {
				let arr = [];
				arr = this.preList.filter((item) => {
					let k = false,
						val;
					val = new String(item.mobile);
					let array = {
						index: ['address', 'mobile', 'order_id', 'order_sn'],
						shop: ["address", "delivery_label", "loaction_addr0", "mobile", "shop_name", "tags"],
						order_goods: ["goods_name"]
					};
					for (let i in array.index) {
						let key = array.index[i];
						val = new String(item[key]);
						if (val.includes(data)) {
							k = true;
							break;
						}
					}
					if (!k) {
						for (let i in array.shop) {
							let key = array.shop[i];
							val = new String(item.shop[key]);
							if (val.includes(data)) {
								k = true;
								break;
							}
						}
					}
					if (!k) {
						for (let i in array.order_goods) {
							let key = array.order_goods[i];
							let arr = item.order_goods;
							for (let l in arr) {
								val = arr[l][key];
								if (val.includes(data)) {
									k = true;
									break;
								}
							}
							if (k) {
								break;
							}

						}
					}
					return k;
				})
				this.orderList = arr;
				uni.hideLoading();

			},


			sub() {
				this.apiRequest('/buyer/complaintOrder', this.formData, 1).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
					})
					if (res.code == 200) {
						uni.redirectTo({
							url: '/app/TakeOut/pages/user/complaintList'
						});
					}
				})
			},
			orderinfo(id) {
				uni.navigateTo({
					url: '/app/TakeOut/pages/order/orderInfo?id=' + id
				});
			},
			selectOrder() {

				this.$refs.order.open()
			},
			checkOrder(item) {
				this.selectList = [];
				this.formData.order_id = item.order_id
				this.order_sn = item.order_sn;
				this.$nextTick(() => {
					this.selectList.push(item);
				})
				this.isShowComment = false;
			},
			changeType(e) {
				this.type = e;
				if (e != 3) {
					this.formData.order_id = 0
					this.order_sn = 0
				}
			},
			closeComent(index) { //
				(this.isShowComment) ? (() => {
					this.isShowComment = false;
				})() : (() => {
					this.searchVal = "";
					this.apiRequest('/buyer/getComplaintOrder', {
						area_id: uni.getStorageSync('area_id')
					}).then(res => {
						this.orderList = res.data;
						this.preList = this.orderList;
					})
					this.isShowComment = true;
				})()

			},
			closeApply() {
				this.$refs.reply.close("bottom")
			},
			search() {
				this.$refs.reply.open("bottom")
			},

		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		overflow: hidden;
	}
	.itemBox2 {
		display: flex;
		align-items: center;
	}
	
	.locationBox {
		width: 94%;
		margin: auto;
		position: relative;
	
	}
	
	.topbox {
		position: fixed;
		z-index: 99;
		top: 0;
		width: 100%;
		background-color: #F7F7F7;
	}
	.addr-name {
		font-family: PingFang SC;
		max-width: 80%;
		font-size: 36upx;
		font-weight: 800;
		display: -webkit-box;
		text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		overflow: hidden;
		-webkit-box-orient: vertical;
	
	}

	.search-bottom {
		height: 80%;
		width: 18%;
		font-size: 30upx;
		margin-left: 1%;

	}

	.sousuo {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
		left: 1vw;
		position: absolute;
		float: left;

	}

	.tousu-item-title {
		width: 94%;
		margin-left: 3%;
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 30upx;
		font-weight: 800;
		color: #333333;
		padding-left: 1%;
	}

	.tousu-item-box {
		width: 94%;
		height: 80upx;
		margin-left: 3%;
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.tousu-item-box1 {
		height: 86%;
		width: 23%;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
	}

	.c-content {
		width: 94%;
		margin-left: 3%;
		margin-top: 2%;
	}



	.c-order {
		padding: 24rpx;
	}

	.type-box {
		padding: 24rpx;
	}

	.select-btn {
		width: 94%;
		margin-left: 3%;
		height: 300upx;
		border: 4upx dashed #DBDBDB;
		border-radius: 20upx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
	}

	.inputbox {
		width: 100vw;
		height: 100upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background: #FFFFFF;
		justify-content: center;
		position: absolute;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.input-box {
		width: 80%;
		height: 80%;
		border: 1px solid #E4EDFE;
	}

	textarea {
		width: 100%;
		height: 280rpx;
		background-color: $white;
		font-size: $fontSize;
		color: #898989;
		padding: 24rpx;
		box-sizing: border-box;
		line-height: 40rpx;
		background: #EEEEEE;
		margin-top: 15rpx;
	}

	.c-btn-box {
		padding: 54upx 30upx;
	}

	.c-btn-box button {
		width: 100%;
		height: 80upx;
		border-radius: 20upx;
		color: #000000;
		background-color: #1270e0;
		line-height: 80upx;
		color: #FFFFFF
	}

	.c-order-list {
		width: 600rpx;
		height: 800rpx;
		border-top: #333333 10rpx solid;
		background: #EEEEEE;
	}

	.c-order-item {
		width: 86%;
		padding: 5%;
		background: #FFFFFF;
		margin: 20rpx 2%;
	}

	.small-text {
		font-size: 20rpx;
	}

	.hov {
		background: #CCCCCC;
	}

	.order-sn {
		margin-left: 24rpx;
		font-weight: bold;
	}

	/* 	二级评论样式 */
	.comment-secen-box {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		z-index: 999;
	}

	.mask {
		width: 100%;
		height: 100%;
		background-color: #000000;
		opacity: 0.5;
		position: absolute;
		top: 0;

	}

	.comment-secend {
		width: 100%;
		height: 90vh;
		position: absolute;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #F7F7F7;
		border-radius: 20upx 20upx 0px 0px;
	}

	.comment-secend-title {
		width: 90%;
		height: 100upx;
		display: flex;
		flex-direction: row;
		font-size: 36upx;
		font-weight: 800;
		color: #333333;
		line-height: 100upx;
		position: relative;
		justify-content: center;
		align-items: center;
	}

	.comment-secend-boxes {
		width: 90%;
		height: 90vh;
		display: flex;
		flex-direction: column;
	}

	.comment-item-box1 {
		width: 100%;
		max-height: 500upx;
		margin-top: 20upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		flex-direction: column;
		justify-content: center;
		border-top: 4upx solid #F2F2F2;

	}

	.comment-secend-fn {
		position: absolute;
		float: right;
		right: 0;
		display: flex;
		flex-direction: row;
	}

	.comment-foot-icon {
		height: 100%;
		display: flex;
		font-size: 45upx;
		color: #DBDBDB;
	}

	.selectOrder {
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
	}

	.select-order-box {
		width: 98%;
		margin-left: 1%;
		height: 88vh;
		display: flex;
		flex-direction: column;
	}

	.order-item-s {
		width: 100%;
		height: 320upx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
	}

	.order-item-s-h {
		width: 96%;
		margin-left: 2%;
		height: 32%;
		margin-top: 1%;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.order-item-s-img {
		height: 100%;
		width: 20%;
	}

	.order-item-s-h-c {
		width: 60%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.order-item-s1 {
		width: 100%;
		height: 320upx;

	}

	.order-item-s-h-r {
		position: absolute;
		float: right;
		right: 0;
		font-size: 24upx;
		font-weight: 500;
		color: #999999;
		display: flex;
		text-align: end;
		flex-direction: column;
	}

	.shop-name-order {
		width: 100%;
		height: 70%;
		font-size: 28upx;
		font-weight: 800;
		color: #333333;
	}

	.shop-order-d {
		font-size: 22upx;
		font-weight: 500;
		color: #999999;
	}

	.order-item-body {
		width: 78%;
		margin-left: 20%;
		height: 68%;
		display: flex;
		position: relative;
		flex-direction: row;
		align-items: center;
	}

	.order-item-body-box {
		width: 80%;
		height: 100%;
		white-space: nowrap;
	}

	.order-item-body-box view {
		display: inline-block;
		width: 150upx;
		height: 100%;
		white-space: normal;


	}

	.shops-img {
		width: 140upx;
		height: 140upx;
	}

	.shops-name {
		width: 100%;
		display: inline-block;
		margin-top: 5upx;
		font-size: 20upx;
		font-weight: 500;
		color: #333333;
	}

	.o-order-item {
		width: 94%;
		margin: 0 auto 20rpx auto;
		background-color: #FFFFFF;
		box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		position: relative;
		padding: 4%;
	}

	.o-order-item view {
		background-color: #FFFFFF;
	}

	.o-item-header {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.o-item-header view {
		line-height: 1.2;
	}

	.shop-logo {
		width: 60rpx;
		height: 60rpx;
		border-radius: 10rpx;
	}

	.shop-info {
		font-size: 24rpx;
		margin-left: 15rpx;
		width: 60%;
	}

	.shop-info .title {
		color: #000000;
		font-weight: bold;
	}

	.shop-info .addtime {
		font-size: 20rpx;
		color: #666666;
	}

	.horseInfo .deliveryMer {
		margin-left: 15rpx;
		color: #FF5053;
	}

	.shop-info .self-tag {
		font-weight: bold;
		font-size: 20rpx;
		color: #FF3333;
	}

	.o-item-header .status {
		margin-left: auto;
		color: #333333;
		font-size: 24rpx;
		font-weight: bold;
	}
	.price-box{
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
	}

	.o-item-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.o-item-content .goodImg {
		width: 100rpx;
		height: 100rpx;
		border-radius: 15rpx;
	}

	.o-item-content .goods-name {
		font-size: 24rpx;
		color: #666666;
		margin-left: 15rpx;
		width: 60%;
	}

	.o-item-content .goods-name .spec-key {
		font-size: 20rpx;
	}

	.o-item-content .goods-price {
		width: 20%;
		text-align: right;
	}

	.o-item-content .goods-price .num {
		color: #666666;
		font-size: 20rpx;
	}

	.o-item-footer {
		text-align: right;
		margin-top: 20rpx;
	}

	.o-item-footer .order-btn {
		padding: 2rpx 10rpx;
		border: 1px solid #666666;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;

	}

	.o-item-footer .order-btn-blue {
		padding: 2rpx 10rpx;
		border: 1px solid #1270e0;
		border-radius: 10rpx;
		margin-left: 15rpx;
		font-size: 28rpx;
		color: #1270E0;
	}

	.right-ico {
		font-size: 20rpx;
		color: #999999;
		margin-left: 15upx;
	}
</style>
